<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例5</title>
		<style type="text/css">
			#div1 {
				width: 500px;
				height: 500px;

				margin: 10px auto
			}

			input {
				margin-top: 10px;
			}

			#btn1 {
				margin-top: 5px;
				margin-left:93px;
			}

			.show {
				width: 200px;
				height: 200px;
				margin-left: 10%;
				margin-top: 10px;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<label for="name">属性名:</label>
			<input type="text" id="name" /><br>
			<label for="aValue">属性值:</label>
			<input type="text" id="aValue" /><br>
			<button type="button" id="btn1">确定</button>
			<button type="button" id="btn2">重置</button>
			<div class="show">在上方输入框输入"属性名"及"属性值"，点击确定按钮查看效果。</div>
		</div>
	</body>
</html>
<script src="../js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/test5.js" type="text/javascript" charset="utf-8"></script>